import React, { ReactNode, useState, CSSProperties } from 'react';
import classNames from 'classnames';
import Icon from '../Icon/Icon';

export type AlertType = 'success' | 'danger' | 'warning' | 'default';

export interface AlertProps {
  closed?: boolean;
  title?: string | ReactNode;
  content?: string | ReactNode;
  type?: AlertType;
  style?: CSSProperties
}

const Alert: React.FC<AlertProps> = (props) => {
  const { closed, title, content, type, children,style } = props;
  const [closeAbled, setCloseAbled] = useState(false);
  const hasChildren = content;
  const classes = classNames('alert', {
    [`alert-${type}`]: type,
    [`alert-content`]: hasChildren,
    [`alert-close-icon`]: closed,
    hide: closeAbled,
  });

  const hideAlert = () => {
    setCloseAbled(true);
  };

  return (
    <div className={classes} style={style}>
      <span className="alert-title">{title ||children }</span>
      <span
        className="alert-description"
        style={{ display: hasChildren ? 'block' : 'none' }}>
        {content}
      </span>
      <span
        className="closeabled"
        onClick={hideAlert}
        style={{ display: closed ? 'inline-block' : 'none' }}>
        <Icon name="times" color="#666" size="1x" />
      </span>
    </div>
  );
};

export default Alert;
